<template>
    <div>
      <h1>主页面</h1>
      <!-- 按钮点击时触发跳转 -->
      <button @click="goToAbout">Go to About with Params</button>
      <button @click="goToAboutWithQuery">Go to About with Query</button>
    </div>
  </template>
  
  <script>
  export default {
    methods: {
      goToAbout() {
        this.$router.push({ 
          name: 'About', 
          params: { id: '123' } 
        });
      },
      goToAboutWithQuery() {
        this.$router.push({ 
          path: '/about', 
          query: { id: '123' } 
        });
      }
    }
  }
  </script>